<template>
  <div class="exam-list-page">
    <!-- 页面标题与操作区 -->
    <div class="page-header mb-6">
      <h2 class="title">试卷管理</h2>
      <p class="desc">管理所有随堂测验和考试试卷</p>
    </div>

    <!-- 搜索与操作区 -->
    <el-card class="search-card mb-6">
      <div class="search-container">
        <el-row :gutter="24">
          <!-- 搜索与筛选 -->
          <el-col :span="24">
            <el-row :gutter="24">
              <el-col :span="10">
                <el-input
                  v-model="searchForm.keyword"
                  placeholder="搜索试卷名称"
                  prefix-icon="el-icon-search"
                  clearable
                  @keyup.enter.native="handleSearch"
                ></el-input>
              </el-col>
              <el-col :span="3" style="min-width: 160px;">
                <el-select
                  v-model="searchForm.type"
                  placeholder="所有类型"
                  clearable
                >
                  <el-option label="随堂测验" :value="0"></el-option>
                  <el-option label="考试" :value="1"></el-option>
                </el-select>
              </el-col>
              <el-col :span="3" style="min-width: 160px;">
                <el-select
                  v-model="searchForm.status"
                  placeholder="所有状态"
                  clearable
                >
                  <el-option label="启用" value="1"></el-option>
                  <el-option label="停用" value="0"></el-option>
                </el-select>
              </el-col>
              <el-col :span="4" style="min-width: 200px;">
                <el-button 
                  type="primary"
                  icon="el-icon-search"
                  @click="handleSearch"
                >
                  搜索
                </el-button>
                <el-button 
                  @click="resetFilter"
                >
                  重置
                </el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <!-- 试卷列表 -->
    <el-card class="exam-table-card">
      <div class="table-header">
        <el-button 
          type="primary" 
          icon="el-icon-plus"
          @click="handleAddExam"
          size="medium"
        >
          新增试卷
        </el-button>
      </div>
      <el-table
        :data="examList"
        v-loading="loading"
        border
        stripe
        :header-cell-style="{ background: '#f5f7fa' }"
        class="exam-table"
      >
        <el-table-column
          prop="id"
          label="试卷ID"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="title"
          label="试卷标题"
          min-width="200"
        ></el-table-column>
        <el-table-column
          label="类型"
          min-width="120"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.type === 0 || scope.row.type === '0' ? 'info' : 'primary'"
              size="small"
            >
              {{ scope.row.type === 0 || scope.row.type === '0' ? '随堂测验' : '考试' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="duration"
          label="时长(分钟)"
          min-width="120"
          align="center"
        </el-table-column>
        <el-table-column
          label="题目数量"
          min-width="120"
          align="center"
        >
          <template slot-scope="scope">
            <span class="question-count">
              {{ scope.row.questionCount }} 题
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          min-width="100"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.status === '1' || scope.row.status === 1 ? 'success' : 'info'"
              size="small"
            >
              {{ scope.row.status === '1' || scope.row.status === 1 ? '启用' : '停用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          min-width="160"
        >
          <template slot-scope="scope">
            {{ scope.row.createTime | formatDate }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          min-width="180"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              class="text-primary"
              @click="handleEditExam(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              size="small"
              :style="{ color: (scope.row.status == 1 || scope.row.status === '1') ? '#F53F3F' : '#00B42A', marginLeft: '10px' }"
              @click="handleDisable(scope.row)"
            >
              {{ (scope.row.status == 1 || scope.row.status === '1') ? '停用' : '启用' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.page"
          :page-sizes="[10, 20, 50]"
          :page-size="pagination.size"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </div>
    </el-card>

    <!-- 新增/编辑试卷弹窗 -->
    <el-drawer
      :title="isEdit ? '编辑试卷' : '新增试卷'"
      :visible.sync="dialogVisible"
      direction="rtl"
      :size="700"
      :close-on-click-modal="false"
    >
      <div style="padding: 20px;">
        <el-form
          ref="examForm"
          :model="examForm"
          :rules="examRules"
          label-width="100px"
          class="exam-form"
        >
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="试卷标题" prop="title">
                <el-input
                  v-model="examForm.title"
                  placeholder="请输入试卷标题"
                  maxlength="50"
                  show-word-limit
                ></el-input>
              </el-form-item>
            </el-col>
            
            <el-col :span="12">
              <el-form-item label="试卷类型" prop="type">
                <el-radio-group v-model="examForm.type" style="width: 100%;">
                  <el-radio :label="0" style="margin-bottom: 8px;">
                    <div style="display: flex; align-items: center;">
                      <i class="el-icon-notebook-2" style="margin-right: 8px; color: #909399;"></i>
                      <span>随堂测验</span>
                    </div>
                  </el-radio>
                  <el-radio :label="1">
                    <div style="display: flex; align-items: center;">
                      <i class="el-icon-document-checked" style="margin-right: 8px; color: #409EFF;"></i>
                      <span>正式考试</span>
                    </div>
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            
            <el-col :span="12">
              <el-form-item label="考试时长" prop="duration">
                <el-input-number
                  v-model="examForm.duration"
                  :min="5"
                  :max="180"
                  :step="5"
                  controls-position="right"
                  style="width: 100%;"
                >
                  <template slot="append">分钟</template>
                </el-input-number>
              </el-form-item>
            </el-col>
            
            <el-col :span="24">
              <el-form-item label="题目管理" prop="questionCount">
                <div class="question-management">
                  <div class="question-count-display">
                    <span class="count-text">已选题目：</span>
                    <span class="count-number">{{ examForm.questionCount }}</span>
                    <span class="count-unit">题</span>
                  </div>
                  <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    @click="openQuestionBank"
                    size="medium"
                  >
                    从题库选择
                  </el-button>
                </div>
              </el-form-item>
            </el-col>
            
            <el-col :span="24" v-if="selectedQuestions.length > 0">
              <el-form-item label="题目列表">
                <div class="selected-questions">
                  <div 
                    class="question-item"
                    v-for="(item, index) in selectedQuestions"
                    :key="item.id"
                  >
                    <div class="question-header">
                      <span class="question-number">第{{ index + 1 }}题</span>
                      <el-tag 
                        size="mini" 
                        :type="item.type === 'single' ? 'success' : item.type === 'multiple' ? 'warning' : 'info'"
                      >
                        {{ item.type === 'single' ? '单选题' : 
                            item.type === 'multiple' ? '多选题' : '判断题' }}
                      </el-tag>
                      <el-button
                        type="text"
                        size="mini"
                        icon="el-icon-delete"
                        class="delete-question"
                        @click="removeQuestion(index)"
                      >
                        删除
                      </el-button>
                    </div>
                    <div class="question-content">
                      {{ item.content }}
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        
        <div style="text-align: right; margin-top: 30px; padding-top: 20px; border-top: 1px solid #EBEEF5;">
          <el-button @click="dialogVisible = false" size="medium">取消</el-button>
          <el-button 
            type="primary" 
            @click="submitExamForm"
            size="medium"
          >
            {{ isEdit ? '保存修改' : '创建试卷' }}
          </el-button>
        </div>
      </div>
    </el-drawer>

    <!-- 题库选择弹窗 -->
    <el-dialog
      title="选择题目"
      :visible.sync="questionBankVisible"
      width="900px"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      top="5vh"
    >
      <div class="question-filter">
        <!-- 搜索筛选区域 -->
        <el-row :gutter="16" style="margin-bottom: 16px;">
          <el-col :span="12">
            <el-input
              v-model="questionFilter.keyword"
              placeholder="搜索题目内容"
              prefix-icon="el-icon-search"
              clearable
              @keyup.enter.native="handleQuestionSearch"
            ></el-input>
          </el-col>
          <el-col :span="5">
            <el-select
              v-model="questionFilter.type"
              placeholder="所有题型"
              clearable
              @change="handleQuestionSearch"
              style="width: 100%;"
            >
              <el-option label="单选题" value="1"></el-option>
              <el-option label="多选题" value="2"></el-option>
              <el-option label="判断题" value="3"></el-option>
            </el-select>
          </el-col>
          <el-col :span="7">
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="handleQuestionSearch"
            >
              搜索
            </el-button>
            <el-button
              @click="handleQuestionReset"
            >
              重置
            </el-button>
          </el-col>
        </el-row>
        
        <el-table
          ref="questionTable"
          :data="questionBank"
          border
          stripe
          :header-cell-style="{ background: '#f5f7fa' }"
          class="question-table"
          @selection-change="handleQuestionSelectionChange"
          max-height="400"
          v-loading="questionLoading"
        >
          <el-table-column
            type="selection"
            width="55"
            :selectable="canSelectQuestion"
          ></el-table-column>
          <el-table-column
            prop="id"
            label="题目ID"
            width="80"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="content"
            label="题目内容"
            min-width="400"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="type"
            label="题型"
            min-width="120"
            align="center"
          >
            <template slot-scope="scope">
              <el-tag 
                size="small"
                :type="scope.row.type === '1' ? 'success' : 
                      scope.row.type === '2' ? 'warning' : 'info'"
              >
                {{ scope.row.type === '1' ? '单选题' : 
                  scope.row.type === '2' ? '多选题' : '判断题' }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 分页 -->
        <div class="pagination-container" style="margin-top: 16px; text-align: right;">
          <el-pagination
            @size-change="handleQuestionSizeChange"
            @current-change="handleQuestionCurrentChange"
            :current-page="questionPagination.page"
            :page-sizes="[10, 20, 50]"
            :page-size="questionPagination.size"
            :total="questionPagination.total"
            layout="total, sizes, prev, pager, next"
          ></el-pagination>
        </div>
      </div>
      
      <div slot="footer">
        <span style="color: #909399; font-size: 14px; margin-right: 20px;">
          已选择 {{ tempSelectedQuestions.length }} 道题目
        </span>
        <el-button @click="questionBankVisible = false">取消</el-button>
        <el-button 
          type="primary" 
          @click="confirmSelectQuestions"
          :disabled="tempSelectedQuestions.length === 0"
        >
          确认添加 {{ tempSelectedQuestions.length > 0 ? `(${tempSelectedQuestions.length})` : '' }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import api from '@/api'

export default {
  data() {
    return {
      // 搜索筛选
      searchForm: {
        keyword: '',
        type: '',
        status: ''
      },
      
      // 试卷列表数据
      examList: [],
      loading: false,
      
      // 分页配置
      pagination: {
        page: 1,
        size: 10,
        total: 0
      },
      
      // 弹窗状态
      dialogVisible: false,
      questionBankVisible: false,
      isEdit: false,
      
      // 试卷表单数据
      examForm: {
        id: '',
        title: '',
        type: 0, // 0:随堂测验, 1:考试
        duration: 30,
        questionCount: 0
      },
      
      // 表单验证规则
      examRules: {
        title: [
          { required: true, message: '请输入试卷标题', trigger: 'blur' },
          { min: 2, max: 50, message: '标题长度在 2-50 个字符之间', trigger: 'blur' }
        ],
        duration: [
          { required: true, message: '请输入考试时长', trigger: 'blur' },
          { type: 'number', min: 5, message: '时长不能少于 5 分钟', trigger: 'blur' }
        ]
      },
      
      // 已选题目
      selectedQuestions: [],
      
      // 题库数据
      questionBank: [],
      
      // 题目搜索和筛选
      questionFilter: {
        keyword: '',
        type: ''
      },
      
      // 题库分页
      questionPagination: {
        page: 1,
        size: 10,
        total: 0
      },
      
      // 题库加载状态
      questionLoading: false,
      
      // 题目搜索(保留兼容)
      questionSearch: '',
      
      // 临时选中的题目
      tempSelectedQuestions: []
    };
  },
  
  mounted() {
    // 初始化加载试卷列表
    this.getExamList()
  },
  
  methods: {
    // 获取试卷列表
    async getExamList() {
      this.loading = true
      try {
        const params = {
          page: this.pagination.page,
          page_size: this.pagination.size
        }
        
        // 只添加有值的搜索参数
        if (this.searchForm.keyword) {
          params.name = this.searchForm.keyword
        }
        if (this.searchForm.type !== '' && this.searchForm.type !== null && this.searchForm.type !== undefined) {
          params.type = Number(this.searchForm.type)
        }
        if (this.searchForm.status) {
          params.status = this.searchForm.status
        }
        
        const res = await api.exam.getExamList(params)
        
        if (res && res.code === 200) {
          const list = Array.isArray(res.data?.list) ? res.data.list : (Array.isArray(res.data) ? res.data : [])
          
          this.examList = list.map(item => ({
            id: item.id,
            title: item.name || item.title,
            type: item.type !== undefined ? item.type : 0, // 保持数字类型: 0=随堂测验, 1=考试
            duration: item.duration || 0,
            questionCount: item.question_count || 0,
            status: item.status === 1 || item.status === '1' ? '1' : '0',
            createTime: item.created_at || item.create_time || '',
            questions: item.questions || [] // 保存题目列表数据
          }))
          
          // 兼容两种分页格式
          if (res.pagination) {
            this.pagination.total = res.pagination.total || 0
            this.pagination.page = res.pagination.page || this.pagination.page
            this.pagination.size = res.pagination.page_size || this.pagination.size
          } else if (res.data) {
            this.pagination.total = res.data.total || 0
            this.pagination.page = res.data.page || this.pagination.page
            this.pagination.size = res.data.page_size || this.pagination.size
          }
        }
      } catch (error) {
        this.$message.error('获取试卷列表失败')
      } finally {
        this.loading = false
      }
    },
    
    // 获取题库列表
    async getQuestionBank() {
      this.questionLoading = true
      try {
        const params = {
          page: this.questionPagination.page,
          page_size: this.questionPagination.size
        }
        
        // 添加筛选参数
        if (this.questionFilter.keyword) {
          params.content = this.questionFilter.keyword
        }
        if (this.questionFilter.type) {
          params.type = this.questionFilter.type
        }
        // 不传status字段，已禁用的题目不能加入试卷
        
        const res = await api.exam.getPaperQuestions(params)
        
        if (res && res.code === 200) {
          const list = Array.isArray(res.data?.list) ? res.data.list : (Array.isArray(res.data) ? res.data : [])
          
          this.questionBank = list.map(item => ({
            id: item.id,
            content: item.content || item.question || '',
            type: String(item.type || '1') // 转为字符串: '1', '2', '3'
          }))
          
          // 处理分页
          if (res.pagination) {
            this.questionPagination.total = res.pagination.total || 0
          } else if (res.data) {
            this.questionPagination.total = res.data.total || 0
          }
        }
      } catch (error) {
        this.$message.error('获取题库失败')
      } finally {
        this.questionLoading = false
      }
    },
    
    // 搜索功能
    handleSearch() {
      this.pagination.page = 1
      this.getExamList()
    },

    // 重置筛选
    resetFilter() {
      this.searchForm = {
        keyword: '',
        type: '',
        status: ''
      }
      this.pagination.page = 1
      this.getExamList()
    },
    
    // 分页方法
    handleSizeChange(size) {
      this.pagination.size = size
      this.pagination.page = 1
      this.getExamList()
    },
    handleCurrentChange(page) {
      this.pagination.page = page
      this.getExamList()
    },
    
    // 新增试卷
    handleAddExam() {
      this.isEdit = false
      this.examForm = {
        id: '',
        title: '',
        type: 0, // 0:随堂测验, 1:考试
        duration: 30,
        questionCount: 0
      }
      this.selectedQuestions = []
      this.dialogVisible = true
    },
    
    // 编辑试卷
    async handleEditExam(row) {
      this.isEdit = true
      // 确保type是数字类型，用于radio-group绑定
      this.examForm = {
        ...row,
        type: row.type === '0' || row.type === 0 ? 0 : (row.type === '1' || row.type === 1 ? 1 : 0),
        title: row.name || row.title || ''
      }
      
      // 解析题目列表
      const questions = Array.isArray(row.questions) ? row.questions : []
      this.selectedQuestions = questions.map(q => {
        // 解析 options (可能是 JSON 字符串)
        let parsedOptions = []
        if (typeof q.options === 'string') {
          try {
            parsedOptions = JSON.parse(q.options)
          } catch (e) {
            parsedOptions = []
          }
        } else if (Array.isArray(q.options)) {
          parsedOptions = q.options
        }
        
        // 判断题型
        let questionType = 'single'
        if (q.type === 2 || q.type === '2') questionType = 'multiple'
        if (q.type === 3 || q.type === '3') questionType = 'judge'
        
        return {
          id: q.id,
          content: q.content || '',
          type: questionType,
          options: parsedOptions
        }
      })
      
      this.dialogVisible = true
    },
    
    // 停用/启用试卷
    async handleDisable(row) {
      const updateStatusName = (row.status == 1 || row.status === '1') ? '停用' : '启用';
      
      try {
        await this.$confirm(`确定要${updateStatusName}试卷「${row.title}」吗？`, '提示', {
          type: 'warning'
        });

        await api.exam.updateExam({
          ...row,
          ...{status: (row.status == 1 || row.status === '1') ? 0 : 1, name: row.title},
          ...{question_ids: row.questions ? row.questions.map(q => q.id) : []}
        });
        
        this.$message.success(`${updateStatusName}成功`);
        this.getExamList();
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error(`${updateStatusName}失败`);
        }
      }
    },
    
    // 打开题库选择
    openQuestionBank() {
      // 重置筛选条件和分页
      this.questionFilter = {
        keyword: '',
        type: ''
      }
      this.questionPagination.page = 1
      this.tempSelectedQuestions = []
      
      // 先打开对话框
      this.questionBankVisible = true
      
      this.$nextTick(() => {
        this.$refs.questionTable && this.$refs.questionTable.clearSelection()
      })
      
      // 异步加载题库数据
      this.getQuestionBank()
    },
    
    // 题库搜索
    handleQuestionSearch() {
      this.questionPagination.page = 1
      this.getQuestionBank()
    },
    
    // 题库重置
    handleQuestionReset() {
      this.questionFilter = {
        keyword: '',
        type: ''
      }
      this.questionPagination.page = 1
      this.getQuestionBank()
    },
    
    // 题库分页
    handleQuestionSizeChange(size) {
      this.questionPagination.size = size
      this.questionPagination.page = 1
      this.getQuestionBank()
    },
    
    handleQuestionCurrentChange(page) {
      this.questionPagination.page = page
      this.getQuestionBank()
    },
    
    // 处理题目选择变化
    handleQuestionSelectionChange(selection) {
      this.tempSelectedQuestions = selection;
    },
    
    // 判断题目是否可选择（已选的不可再选）
    canSelectQuestion(row) {
      return !this.selectedQuestions.some(q => q.id === row.id);
    },
    
    // 确认选择题目
    confirmSelectQuestions() {
      if (this.tempSelectedQuestions.length === 0) {
        this.$message.warning('请选择题目');
        return;
      }
      
      // 添加选中的题目
      this.selectedQuestions = [...this.selectedQuestions, ...this.tempSelectedQuestions];
      this.examForm.questionCount = this.selectedQuestions.length;
      this.questionBankVisible = false;
      this.$message.success(`成功添加 ${this.tempSelectedQuestions.length} 道题目`);
    },
    
    // 移除已选题目
    removeQuestion(index) {
      this.selectedQuestions.splice(index, 1);
      this.examForm.questionCount = this.selectedQuestions.length;
    },
    
    // 提交表单
    submitExamForm() {
      this.$refs.examForm.validate(async valid => {
        if (valid) {
          if (this.selectedQuestions.length === 0) {
            this.$message.warning('请至少选择一道题目')
            return
          }
          
          try {
            const questionIds = this.selectedQuestions.map(q => q.id)
            const submitData = {
              name: this.examForm.title,
              duration: this.examForm.duration,
              type: this.examForm.type,
              question_ids: questionIds
            }
            
            if (this.isEdit) {
              // 编辑操作
              submitData.id = this.examForm.id
              await api.exam.updateExam(submitData)
              this.$message.success('编辑成功')
            } else {
              // 新增操作
              await api.exam.createExam(submitData)
              this.$message.success('新增成功')
            }
            
            this.dialogVisible = false
            this.getExamList()
          } catch (error) {
            this.$message.error(this.isEdit ? '编辑失败' : '新增失败')
          }
        }
      })
    }
  }
};
</script>

<style scoped>
/* 页面布局 */
.exam-list-page {
  width: 100%;
  padding: 20px;
}

/* 页头样式 */
.page-header {
  margin-bottom: 20px;
  text-align: left;
}
.title {
  font-size: 20px;
  font-weight: bold;
  color: #304156;
  margin-bottom: 5px;
  margin-left: 0;
}
.desc {
  color: #86909C;
  font-size: 14px;
  text-align: left;
}

/* 搜索区 */
.search-card {
  padding: 15px 20px;
}
.search-container {
  width: 100%;
}

/* 表格样式 */
.exam-table-card {
  margin-bottom: 20px;
}
.exam-table {
  width: 100%;
}
.question-count {
  color: #165DFF;
  font-weight: 500;
}

/* 表格头部 */
.table-header {
  margin-bottom: 16px;
  text-align: left;
}

/* 分页 */
.pagination-container {
  margin-top: 20px;
  text-align: right;
}

/* 表单样式 */
.exam-form {
  margin-top: 10px;
}

/* 题目管理区域 */
.question-management {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: #F7F8FA;
  border-radius: 6px;
  border: 1px solid #EBEEF5;
}
.question-count-display {
  display: flex;
  align-items: center;
  gap: 8px;
}
.count-text {
  color: #606266;
  font-size: 14px;
}
.count-number {
  color: #409EFF;
  font-size: 18px;
  font-weight: bold;
}
.count-unit {
  color: #909399;
  font-size: 14px;
}

/* 已选题目列表 */
.selected-questions {
  max-height: 600px;
  overflow-y: auto;
  border: 1px solid #EBEEF5;
  border-radius: 6px;
  background-color: #FAFAFA;
}
.question-item {
  padding: 16px;
  border-bottom: 1px solid #EBEEF5;
  background-color: #fff;
  margin-bottom: 8px;
  border-radius: 4px;
}
.question-item:last-child {
  margin-bottom: 0;
}
.question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.question-number {
  color: #409EFF;
  font-weight: 500;
  font-size: 14px;
}
.question-content {
  color: #304156;
  line-height: 1.6;
  font-size: 14px;
  padding-left: 12px;
  border-left: 3px solid #E4E7ED;
}
.delete-question {
  color: #F56C6C;
  padding: 0 5px;
}
.delete-question:hover {
  color: #F78989;
}

/* 题库选择弹窗 */
.question-filter {
  max-height: 500px;
  overflow-y: auto;
}
.question-table {
  width: 100%;
}

/* 响应式布局优化 */
@media (max-width: 768px) {
  .exam-list-page {
    padding: 10px;
  }
  
  .question-management {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  
  .search-container .el-row {
    flex-direction: column;
    gap: 10px;
  }
}
</style>